<template>
  <!-- <div v-show="show" class="charts" ref="chart"></div>-->
  <div class="chart" ref="chart"></div>
</template>

<script lang="ts">
import {
  Component,
  Watch,
  Ref,
  Prop,
  PropSync,
  Vue
} from "vue-property-decorator"; // vue组件装饰器
import { ChartsPropsType } from "./model";
import * as echarts from "echarts";
import { EChartsOption } from "echarts";

@Component
export default class GameView extends Vue {
  @Ref("chart") chart!: HTMLCanvasElement;
  @Prop({
    type: Object as () => ChartsPropsType,
    default: () => new ChartsPropsType()
  })
  chartsProps!: ChartsPropsType;
  option: EChartsOption = this.chartsProps.option;
  myChart!: echarts.ECharts;
  @Watch("chartsProps")
  optionChange(value: ChartsPropsType) {
    // 监听props变化
    if (value) {
      if (value.option != this.option) {
        this.option = value.option;
        this.chartreload(this.option);
      }
    }
  }
  chartreload(option: EChartsOption) {
    // 重新加载图表
    //console.info('显示')
    this.myChart.setOption(option);
    // this.myChart.resize();
  }
  mounted() {
    this.myChart = echarts.init(this.chart);
    this.chartreload(this.option);
    window.addEventListener("resize", () => {
      //窗口调整大小
      this.myChart.resize();
    });
  }
}
</script>

<style scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
